---
title: Tailwind CSS Switch/Toggle - Components Library @David UI
description: Toggle settings effortlessly with Tailwind CSS switch components. Ideal for light/dark mode or preferences, with intuitive, responsive designs.
github: switch
prev: docs/react/slider
next: docs/react/textarea
---

# Tailwind CSS Switch/Toggle

Toggle settings easily with the switch component in David UI. Fully styled with Tailwind CSS, it’s perfect for dark mode toggles or other interactive settings. 

Explore our easy-to-integrate examples to implement switch components faster for your Tailwind CSS project.

---

## Basic Switch

A simple toggle switch that changes its background color, border color, and shadow when toggled to the "checked" state.

<PreviewWithCode relativePath="switch/switch-demo.tsx" language="html" />

---

## Switch Checked

In this example, we showcase a switch component set to be checked by default, offering convenience for pre-selected options.

<PreviewWithCode relativePath="switch/switch-checked.tsx" language="html" />

---

## Switch Colors

Try this showcase of toggle switches with diverse color schemes, customizable for various settings or user preferences.

<PreviewWithCode relativePath="switch/switch-colors.tsx" language="html" />

---

## Switch with Label

A toggle switch paired with a descriptive label, making it ideal for settings pages or forms requiring clear binary choices.

<PreviewWithCode relativePath="switch/switch-with-label.tsx" language="html" />

---

## Disabled Switch

Illustrates a non-interactive switch styled with opacity and pointer-events restrictions to convey its disabled state visually and functionally.

<PreviewWithCode relativePath="switch/disabled-switch.tsx" language="html" />

---

## Switch with Link

A toggle with a clickable label containing a hyperlink, useful for options requiring user agreement, such as terms and conditions.

<PreviewWithCode relativePath="switch/switch-with-link.tsx" language="html" />

---

## Remember Me Switch/Toggle

A toggle switch accompanied by a descriptive label and additional context, such as "Remember Me" functionality for authentication pages.

<PreviewWithCode relativePath="switch/switch-with-description.tsx" language="html" />

---

## Switch Custom Styles

An example of how to apply custom designs to toggle switches for enhanced aesthetics and tailored functionality.

<PreviewWithCode relativePath="switch/custom-switch.tsx" language="html" />
